﻿<template>
  <div>
    <!-- <iframe id = "show-iframe" width = '100%' height = '400' frameborder = 0 src = 'https://segmentfault.com/q/1010000018702703'></iframe> -->
    <div :id = 'widget.model' :style = "{width: '100%', height: widget.options.height + 'px', marginBottom: '10px'}"></div>
  </div>
</template>

<script>
import * as $echarts from 'echarts'
import 'echarts/map/js/china.js'
export default {
  props: ['widget', 'dataResource'],
  data () {
    return {
      echart: '',
      echart_option_pie: {
        title: {
          show: true,
          text: '某站点用户访问来源',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 'left',
          top: '8%',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      echart_option_line: {
        title: {
          show: true,
          text: '某站点用户访问来源',
          padding: [0, 10],
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 'left',
          top: '6%',
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          name: '',
          nameGap: 6,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          name: '',
          nameGap: 10
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: 'lineEcharts',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: 'lineEcharts',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: 'lineEcharts',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: 'lineEcharts',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: 'lineEcharts',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      echart_option_bar: {
        title: {
          show: true,
          text: '某站点用户访问来源',
          padding: [0, 10],
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          show: true,
          orient: 'vertical',
          left: 'left',
          top: '6%',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告']
        },
        xAxis: {
          type: 'category',
          name: '',
          nameGap: 6,
          boundaryGap: true,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value',
          name: '',
          nameGap: 10
        },
        series: [
          {
            name: '直接访问',
            type: 'bar',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '邮件营销',
            type: 'bar',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'bar',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'bar',
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ]
      },
      echart_option_map: {
        // backgroundColor: '#FFFFFF',
        tooltip: {
          trigger: 'item'
        },
        title: {
          show: true,
          text: '某站点用户访问来源',
          left: 'center'
        },
        // 左侧小导航图标
        visualMap: {
          show: true,
          x: 'left',
          y: 'bottom',
          left: 0,
          // type: 'piecewise',
          // text: ['高', '低'],
          max: 20,
          min: 0,
          // realtime: false,
          // calculable: true,
          splitNumber: 5,
          color: ['#670f0f', '#960707', '#dc0303', '#e86756', '#e2a58a'],
          pieces: [
            {gt: 1000, label: '1000人以上'},
            {gt: 500, lte: 1000, label: '500-1000人'},
            {gt: 100, lte: 500, label: '100-500人'},
            {gt: 10, lte: 100, label: '10-100人'},
            {lte: 10, label: '10人以下'}
          ]
          // inRange: {
          //   color: ['#f4f6f7', '#06adfb', '#9179ef', '#1d03f9', '#f667f9', '#fb1c5a', '#97fb7f', '#36f707']
          // }
        },
        // 配置属性
        series: [{
          name: '全国疫情确诊人数',
          type: 'map',
          mapType: 'china',
          roam: true,
          label: {
            normal: { // 显示省份标签
              show: true // 区域显示省份名称
            },
            emphasis: { // 对应的鼠标悬浮效果
              show: false
            }
          },
          data: [] // 数据
        }]
      }
    }
  },
  computed: {
    isCollapse () {
      return this.$store.state.isCollapse
    }
  },
  watch: {
    dataResource: {
      handler: function (newVal, oldVal) {
        this.$nextTick(() => {
          this.init()
        })
      },
      deep: true
    },
    isCollapse: {
      handler: function (newVal, oldVal) {
        this.$nextTick(() => {
          if (this.echart) {
            this.echart.resize()
          }
        })
      },
      deep: true
    }
  },
  methods: {
    init () {
      this.echart = $echarts.init(document.getElementById(this.widget.model))
      // 饼图时
      if (this.widget.options.optionType === 'pie') {
        // 标题
        this.echart_option_pie.title.show = this.widget.options.showTitle
        this.echart_option_pie.title.text = this.widget.options.titleText
        // 图例
        this.echart_option_pie.legend.show = this.widget.options.showLegend
        this.echart_option_pie.legend.orient = this.widget.options.legendOrient
        // 饼图的大小
        this.echart_option_pie.series[0].radius = this.widget.options.pieRadius
        // 图例的数据源
        this.echart_option_pie.legend.data = []
        // 展示的数据源
        this.echart_option_pie.series[0].data = []
        if (this.dataResource && this.dataResource.length) {
          this.dataResource.forEach((item, index) => {
            this.$set(this.echart_option_pie.legend.data, this.echart_option_pie.legend.data.length, item.name)
            this.$set(this.echart_option_pie.series[0].data, this.echart_option_pie.series[0].data.length, item)
          })
        }
        this.echart.setOption(this.echart_option_pie)
      } else if (this.widget.options.optionType === 'line') { // 折线图时
        // 标题
        this.echart_option_line.title.show = this.widget.options.showTitle
        this.echart_option_line.title.text = this.widget.options.titleText
        // 图例
        this.echart_option_line.legend.show = this.widget.options.showLegend
        this.echart_option_line.legend.orient = this.widget.options.legendOrient
        // 坐标轴名称
        this.echart_option_line.xAxis.name = this.widget.options.showXAxis ? this.widget.options.xAxisName : ''
        this.echart_option_line.yAxis.name = this.widget.options.showYAxis ? this.widget.options.yAxisName : ''
        // 图例的数据源
        this.echart_option_line.legend.data = []
        // X轴的数据源
        this.echart_option_line.xAxis.data = []
        // 展示的数据源
        this.echart_option_line.series = []
        if (this.dataResource && !this.$isEmptyObject(this.dataResource)) {
          // 修改坐标轴的数据
          if (this.dataResource.axis && this.dataResource.axis.length) {
            this.dataResource.axis.forEach((item, index) => {
              this.$set(this.echart_option_line.xAxis.data, this.echart_option_line.xAxis.data.length, item)
            })
          }
          // 修改数据源
          if (this.dataResource.data && this.dataResource.data.length) {
            this.dataResource.data.forEach((item, index) => {
              this.$set(this.echart_option_line.legend.data, this.echart_option_line.legend.data.length, item.name)
              let seriesDataObj = {
                name: item.name,
                type: 'line',
                data: item.value
              }
              this.$set(this.echart_option_line.series, this.echart_option_line.series.length, seriesDataObj)
            })
          }
        }
        this.echart.setOption(this.echart_option_line)
      } else if (this.widget.options.optionType === 'bar') { // 柱状图时
        // 标题
        this.echart_option_bar.title.show = this.widget.options.showTitle
        this.echart_option_bar.title.text = this.widget.options.titleText
        // 图例
        this.echart_option_bar.legend.show = this.widget.options.showLegend
        this.echart_option_bar.legend.orient = this.widget.options.legendOrient
        // 坐标轴名称
        this.echart_option_bar.xAxis.name = this.widget.options.showXAxis ? this.widget.options.xAxisName : ''
        this.echart_option_bar.yAxis.name = this.widget.options.showYAxis ? this.widget.options.yAxisName : ''
        // 图例的数据源
        this.echart_option_bar.legend.data = []
        // X轴的数据源
        this.echart_option_bar.xAxis.data = []
        // 展示的数据源
        this.echart_option_bar.series = []
        if (this.dataResource && !this.$isEmptyObject(this.dataResource)) {
          // 修改坐标轴的数据
          if (this.dataResource.axis && this.dataResource.axis.length) {
            this.dataResource.axis.forEach((item, index) => {
              this.$set(this.echart_option_bar.xAxis.data, this.echart_option_bar.xAxis.data.length, item)
            })
          }
          // 修改数据源
          if (this.dataResource.data && this.dataResource.data.length) {
            this.dataResource.data.forEach((item, index) => {
              this.$set(this.echart_option_bar.legend.data, this.echart_option_bar.legend.data.length, item.name)
              let seriesDataObj = {
                name: item.name,
                type: 'bar',
                data: item.value
              }
              this.$set(this.echart_option_bar.series, this.echart_option_bar.series.length, seriesDataObj)
            })
          }
        }
        this.echart.setOption(this.echart_option_bar)
      } else if (this.widget.options.optionType === 'map') {
        // 标题
        this.echart_option_map.title.show = this.widget.options.showTitle
        this.echart_option_map.title.text = this.widget.options.titleText
        // 最大值
        this.echart_option_map.visualMap.max = this.widget.options.mapMax
        // visualMap
        this.echart_option_map.visualMap.pieces = []
        if (this.dataResource.pieces && this.dataResource.pieces.length) {
          this.dataResource.pieces.forEach((item, index) => {
            this.$set(this.echart_option_map.visualMap.pieces, this.echart_option_map.visualMap.pieces.length, item)
          })
        }
        // 展示的数据源
        this.echart_option_map.series[0].data = []
        if (this.dataResource.data && this.dataResource.data.length) {
          this.dataResource.data.forEach((item, index) => {
            this.$set(this.echart_option_map.series[0].data, this.echart_option_map.series[0].data.length, item)
          })
        }
        this.echart.setOption(this.echart_option_map, true)
      }
      // echart图能够进行缩放
      window.addEventListener('resize', this.echart.resize)
    }
  }
  // mounted () {
  //   this.$nextTick(() => {
  //     this.init()
  //   })
  // }
}
</script>
